import { BulbFilled, BulbOutlined } from '@ant-design/icons';
import { Space, Switch, Tooltip } from 'antd';
import type React from 'react';
import { useTheme } from '../../contexts/ThemeContext';
import styles from './index.module.less';

const ThemeToggle: React.FC = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={styles.themeToggle}>
      <Tooltip
        title={theme === 'light' ? '切换到深色主题' : '切换到浅色主题'}
        placement="bottom"
      >
        <Space>
          <BulbOutlined className={styles.lightIcon} />
          <Switch
            checked={theme === 'dark'}
            onChange={toggleTheme}
            checkedChildren={<BulbFilled />}
            unCheckedChildren={<BulbOutlined />}
            className={styles.switch}
          />
          <BulbFilled className={styles.darkIcon} />
        </Space>
      </Tooltip>
    </div>
  );
};

export default ThemeToggle;
